import { Component } from "react";

export default class App extends Component {
  // 方法二：利用构造函数来定义状态
  constructor() {
    super(); //初始化父类中的构造函数
    this.state = {
      msg: "🌙🌙🌙🌙🌙",
    };
  }

  // 方法一：利用类属性来定义状态
  /* state = {
    msg:"⭐⭐⭐⭐⭐"
  } */

  handleChange = () => {
    console.log("改变开始咯");

    // setState是异步的
    // 对象的形式
    /* this.setState({
      msg: "⭐⭐⭐⭐⭐",
    }); */

    // 函数的形式
    this.setState(()=>{
      return{
        msg:"⭐⭐⭐⭐⭐"
      }
    })
  };

  render() {
    return (
      <div>
        <button onClick={this.handleChange}>点我改变</button>
        <div>{this.state.msg}</div>
      </div>
    );
  }
}
